<template>
    <div>
        <table border="1px solid #9B9B9B" cellspacing="0" cellpadding="5" >
            <thead>
                <tr>
                    <td rowspan="2">
                        <el-date-picker
                        v-model="time"
                        type="daterange"
                        range-separator="To"
                        start-placeholder="Start date"
                        end-placeholder="End date"
                        format="MM/DD"
                        style="width: 200px;"
                        @change="pikeDate(time)" />
                    </td>
                    <td rowspan="2">不良项目</td>
                    <td rowspan="2">辅助序号</td>
                    <td rowspan="2">数据校验</td>
                    <td colspan="2" v-for="dat in date">{{ dat.month+'月'+dat.day+'日' }}</td>
                </tr>
                <tr>
                    <td v-for="dat in dayAndNight">{{ dat }}</td>
                </tr>
            </thead>
            <tbody>
                <TableSlot v-for="pro in datalist" :key="pro.proress">
                    <tr v-for="(item,index) in pro.defectItem" :key="index">
                        <td v-if="index === 0" :rowspan="pro.defectItem.length">{{ pro.process }}</td>
                        <td>{{ item }}</td>
                        <td>{{ index+1 }}</td>
                        <td>{{ pro.verify[index]?'TRUE':'FALSE' }}</td>
                        <td v-for="data in pro.data[index]">{{ data }}</td>
                    </tr>
                </TableSlot>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import data from '../components/defectRawDataComponent/mock.js'
import TableSlot from '../components/TableSlot.vue'
import { ref } from 'vue';

const time = ref(null)
const date = ref([])
const dayAndNight = ref([])
const datalist = ref([])

const getData = ()=>{
    date.value = [...data.date]
    let arr = []
    date.value.forEach(ele => {
        arr.push('白')
        arr.push('夜')
    })
    dayAndNight.value = [...arr]
    datalist.value = [...data.data]
}
const pikeDate = (val)=>{
}


getData()
</script>

<style scoped>
td{
    min-width: 50px;
    min-height: 25px;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
}
td:hover{
    background-color: rgb(187, 187, 187);
}
tr:hover{
    background-color: rgb(238, 238, 238);
}
thead{
    position: sticky;
    top:0;
    background-color: rgba(213, 213, 213, 0.7);
    backdrop-filter: blur(4px);
}
</style>
